import React from 'react'
import {useSelector, useDispatch} from "react-redux"
import {modifyUserInfo} from './../store/actions'

// HomeView 使用了hook， 就不是以给纯UI组件；
export default function HomeView() {
  const userInfo = useSelector(state=>state.userInfo)
  const count = useSelector(state=>state.count)
  const dispatch = useDispatch()
  const  editUserInfo =()=>{
    dispatch(modifyUserInfo({...userInfo, uname: '老文',usex:'男',tel:'1234567987'},true))
  }

  return (
    <div>
      <h1>HOME VIEW</h1>
      <h2>欢迎XXX,使用火星移民系统</h2>
      <div>count: {count}</div>
      <ul>
        <li>username: {userInfo.uname}</li>
        <li>sex: {userInfo.usex}</li>
        <li>tel: {userInfo.tel}</li>
      </ul>
      <button type='button' onClick={editUserInfo}>修改userInfo</button>
    </div>
  )
}
